import type { VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'

export const mockDataset: VueUiXyDatasetItem[] = [
  {
    name: 'Series 1',
    series: [12, 25, 32, 64, 34, 26],
    type: 'bar',
    color: '#1f77b4',
    shape: 'circle',
    scaleSteps: 5,
  },
  {
    name: 'Series 2',
    series: [8, 20, 27, 48, 27, 20],
    type: 'bar',
    color: '#aec7e8',
    shape: 'star',
    scaleSteps: 5,
    showSerieName: 'end',
  },
  {
    name: 'Series 3',
    series: [75, 82, 80, 72, 90, 100],
    type: 'line',
    color: '#ff7f0e',
    useArea: false,
    dataLabels: false,
    smooth: true,
    shape: 'circle',
    scaleSteps: 5,
    showSerieName: 'end',
  },
]

export const mockConfig: VueUiXyConfig = {
  downsample: { threshold: 500 },
  responsive: true,
  useCssAnimation: true,
  showTable: false,
  chart: {
    backgroundColor: '#1A1A1A',
    color: '#c8c8c8',
    highlighter: { color: '#e1e5e8', opacity: 10, useLine: false, lineDasharray: 2, lineWidth: 1 },
    timeTag: { show: false, backgroundColor: '#2A2A2A', color: '#CCCCCC', fontSize: 12, circleMarker: { radius: 3, color: '#6A6A6A' } },
    highlightArea: {
      show: true,
      from: 1,
      to: 2,
      color: '#1f77b4',
      opacity: 10,
      caption: { text: 'This area is highlighted', fontSize: 20, color: '#FAFAFA', bold: false, offsetY: 0, width: 'auto', padding: 3, textAlign: 'center' },
    },
    zoom: {
      show: true,
      color: '#6A6A6A',
      highlightColor: '#4A4A4A',
      fontSize: 14,
      useResetSlot: false,
      startIndex: null,
      endIndex: null,
      enableRangeHandles: true,
      enableSelectionDrag: true,
      minimap: { show: true, smooth: true, lineColor: '#1F77B4', selectedColorOpacity: 0.2, selectedColor: '#8A8A8A', selectionRadius: 2, indicatorColor: '#CCCCCC', verticalHandles: false },
    },
    padding: { top: 36, right: 92, bottom: 48, left: 64 },
    grid: { stroke: '#e1e5e8', showVerticalLines: false, showHorizontalLines: false, position: 'middle', frame: { show: false, stroke: '#E1E5E8', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', strokeDasharray: 0 }, labels: { show: true, color: '#c8c8c8', fontSize: 20, axis: { yLabel: 'yLabel', yLabelOffsetX: 0, xLabel: 'xLabel', xLabelOffsetY: 0, fontSize: 20 }, zeroLine: { show: true }, yAxis: { commonScaleSteps: 10, useIndividualScale: false, stacked: false, gap: 64, labelWidth: 40, showBaseline: true, scaleMin: null, scaleMax: 100, groupColor: null, scaleLabelOffsetX: 0, scaleValueOffsetX: 0 }, xAxis: { showBaseline: true }, xAxisLabels: { color: '#c8c8c8', show: true, showOnlyFirstAndLast: false, values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP'], fontSize: 18, yOffset: 0, rotation: 0, showOnlyAtModulo: false, modulo: 12 } } },
    comments: { show: true, showInTooltip: true, width: 200, offsetX: 0, offsetY: -64 },
    labels: { fontSize: 20, prefix: '', suffix: '' },
    legend: { show: true, color: '#c8c8c8', fontSize: 16 },
    title: { show: true, text: 'Title', color: '#c8c8c8', fontSize: 20, bold: true, textAlign: 'center', paddingLeft: 0, paddingRight: 0, subtitle: { fontSize: 16, color: '#c8c8c8', text: 'Subtitle' } },
    tooltip: { color: '#CCCCCC', backgroundColor: '#1A1A1A', show: true, showValue: true, showPercentage: false, roundingValue: 0, roundingPercentage: 0, customFormat: null, borderRadius: 4, borderColor: '#3A3A3A', borderWidth: 1, fontSize: 14, backgroundOpacity: 30, position: 'center', offsetY: 24, showTimeLabel: true },
    userOptions: { print: { scale: 2 }, show: true, showOnChartHover: false, keepStateOnChartLeave: true, position: 'right', buttons: { tooltip: true, pdf: true, img: true, csv: true, table: true, labels: true, stack: true, fullscreen: true, annotator: true }, buttonTitles: { open: 'Open options', close: 'Close options', tooltip: 'Toggle tooltip', pdf: 'Download PDF', csv: 'Download CSV', img: 'Download PNG', table: 'Toggle table', labels: 'Toggle labels', fullscreen: 'Toggle fullscreen', stack: 'Toggle stack mode', annotator: 'Toggle annotator' } },
  },
  bar: {
    borderRadius: 2,
    useGradient: true,
    periodGap: 0.1,
    border: { useSerieColor: false, strokeWidth: 1, stroke: '#1A1A1A' },
    labels: { show: true, offsetY: -6, rounding: 0, color: '#c8c8c8' },
    serieName: { show: false, offsetY: -6, useAbbreviation: true, useSerieColor: true, color: '#c8c8c8', bold: false, abbreviationSize: 3 },
  },
  line: {
    radius: 4,
    useGradient: true,
    strokeWidth: 2,
    cutNullValues: false,
    dot: { hideAboveMaxSerieLength: 62, useSerieColor: true, fill: '#FFFFFF', strokeWidth: 0.5 },
    labels: { show: true, offsetY: -12, rounding: 0, color: '#c8c8c8' },
    area: { useGradient: true, opacity: 30 },
  },
  plot: {
    radius: 3,
    useGradient: true,
    dot: { useSerieColor: true, fill: '#FFFFFF', strokeWidth: 0.5 },
    labels: { show: false, offsetY: -6, rounding: 0, color: '#c8c8c8' },
  },
  table: {
    rounding: 0,
    responsiveBreakpoint: 400,
    sparkline: true,
    showSum: true,
    th: { backgroundColor: '#1A1A1A', color: '#c8c8c8', outline: 'none' },
    td: { backgroundColor: '#1A1A1A', color: '#c8c8c8', outline: 'none' },
    columnNames: { period: 'Period', total: 'Total' },
  },
}
